<template>
	<view>
		<my-animation :share="share" @display="display" :height="height">
			<template v-slot:spOne>
				<view class="ani-view">
					<scroll-view scroll-y="true" class="ani-scroll">
						<view class="ani-top" @click="selectUser('@全体成员')">@全体成员</view>
						<view class="ani-con">
							<view @click="selectUser(item)" class="ani-box" v-for="(item,index) in groupUsers"
								:key="index">
								<view class="left-head">
									<image :src="item.head"></image>
								</view>
								<view class="left-nickname">
									<text>{{item.nickname}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
		</my-animation>
	</view>
</template>

<script>
	import myAnimation from '@/components/common/my-animation/my-animation.vue'

	export default {
		components: {
			myAnimation
		},
		props: {
			share: {
				type: Boolean,
				default: false
			},
			groupUsers: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				height: '700'
			}
		},
		methods: {
			display() {
				this.$emit('display')
			},
			selectUser(item) {
				//'@' + item.nickname
				this.$emit('selectUser', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ani-view {
		height: 700rpx;

		.ani-scroll {
			height: 700rpx;
		}

		.ani-top {
			margin-left: 3%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			color: #aae8f5;
		}

		.ani-con {
			width: 94%;
			// margin-left: 3%;
			padding: 0 3%;

			&:active {
				background-color: #eee;
			}

			.ani-box {
				display: flex;
				height: 100rpx;

				.left-head {
					image {
						margin-top: 10rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}

				.left-nickname {
					line-height: 100rpx;

					text {
						margin-left: 15rpx;
						font-size: 32rpx;
					}
				}

			}
		}
	}
</style>